<template>
	<view class="wrapper">
		<view style="position:relative;margin-top:2rpx;" class="bg-white margin-lr-bj radius-bock padding-lr-bj padding-tb-bj">
					<view class="flex align-center" style="margin-bottom:10px;">
						<image lazy-load class="shop-avatar round margin-right-sm"
							:src="oss(find.user.avatar, 35, 35, 2, 'avatar')"></image>
						<view>
							<view class="flex-direction align-center">
								<text class="text-df text-gray-dark">{{find.user.nickname}}</text>
								<image style="width:82rpx;height:27rpx;margin-left:20rpx;margin-top:10rpx;" src="/static/images/smicon.png"></image>
						
							</view>
							<view class="tag" style="background:#fff;">
								<image v-if="find.expire_days == 7" src="/static/images/sevenday.png" style="width:172rpx;height:42rpx;"></image>
								<image v-if="find.expire_days == 30" src="/static/images/ssday.png" style="width:172rpx;height:42rpx;"></image>
								<image v-if="find.expire_days == 90" src="/static/images/jsday.png" style="width:172rpx;height:42rpx;"></image>
								<image v-if="find.expire_days == 365" src="/static/images/oneyearday.png" style="width:172rpx;height:42rpx;"></image>
								<br/>
								
								<!--
											<text class="text-gray-light text-xs">{{timeToDate(find.createtime)}}</text>
										-->
							<!-- 	<text class="text-gray-light text-min" @click="callphone(find.mobile)">联系方式:<text
										style="font-size:28rpx;color:#ff8043">{{find.mobile}}</text></text> -->
							</view>
						</view>
					</view>
		
		
					<!-- 详细 -->
					<view class="find-list-item-content margin-tb-bj flex-direction align-center"  style="display:flex;justify-content: space-between;align-items: center;">
						<!-- <text class="text-df text-lines-2 text-gray-dark">{{formatHtml(find.content)}}</text> -->
					
						<text style="font-weight: bold;" class="text-df text-lines-2 text-gray-dark">{{find.title}}</text>
							
								<view  style="color:#54bcdb;flex-basis: 300rpx;text-align: right;color:indianred;font-weight:bold" v-if="find.type_id == 30 && find.lowprice != '0.00'">薪资:{{find.lowprice}}-{{find.highprice}}</view>
								<view style="color:#54bcdb;flex-basis: 300rpx;text-align: right;color:indianred;font-weight:bold" v-if="find.type_id == 30 && find.lowprice == '0.00'">薪资:面议</view>
					</view>
		
					<view class="find-list-item-content margin-tb-bj flex-direction align-center">
						<text class="text-df text-lines-2 text-gray-dark">{{formatHtml(find.content)}}</text>
					</view>
		
		
		
					<!-- 图片类型 -->
					<view class="flex overflow-hidden radius flex-wrap flex-direction radius-bock"
						:style="{width: width + 'px;margin-bottom:10px'}" v-if="find.images.length > 0" style="margin-top: 20rpx;">
						<!-- 单个排序 -->
						<view class="find-list-item-container-item" v-if="find.images.length == 1" :style="{
									width: `${width * 0.33}px`
								}" @tap="previewImage(find.images, 0)">
							<image class="radius-bock" lazy-load :src="oss(find.images[0].url, 180, 180)"
								:style="{ width: `${width * 0.33}px`,height:`${width * 0.33}px` }" mode="scaleToFill" />
						</view>
		
						<!-- 二个排序 -->
						<view class="find-list-item-container-item" v-else-if="find.images.length == 2"
							v-for="(img, kes) in find.images" :key="kes" @tap="previewImage(find.images, kes)" :style="{
									width: `${(width - 4) / 2}px`,
									height: `${(width - 4) / 2}px`
								}">
							<!-- #ifdef APP-PLUS -->
							<image :style="{ width: `${(width - 4) / 2}px`,height: `${(width - 4) / 2}px` }" lazy-load
								:src="oss(img.url, 180, 180)" mode="scaleToFill" />
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<image lazy-load :src="oss(img.url, 180, 180)" mode="scaleToFill" />
							<!-- #endif -->
						</view>
		
						<!-- 三个排序 -->
						<view class="flex flex-direction justify-between" v-else-if="find.images.length == 3"
							:style="{ width: width + 'px' }">
							<view
								class="live-cover align-center justify-center position-relative overflow-hidden flex-twice margin-right-s"
								@tap="previewImage(find.images, 0)">
								<!-- #ifdef APP-PLUS -->
								<image :style="{ width: width * 0.666 + 'px' }" lazy-load :src="oss(find.images[0].url, 200, 0)"
									mode="scaleToFill" />
								<!-- #endif -->
								<!-- #ifndef APP-PLUS -->
								<image lazy-load :src="oss(find.images[0].url, 200, 0)" mode="scaleToFill" />
								<!-- #endif -->
							</view>
							<view class="flex-sub" style="width: 0;">
								<view v-if="find.images.length >= 2" class="live-goods-item" style="margin-bottom: 4rpx;"
									@tap="previewImage(find.images, 1)">
									<!-- #ifdef APP-PLUS -->
									<image :style="{ width: width * 0.333 + 'px'}" lazy-load
										:src="oss(find.images[1].url, 120, 120)" mode="scaleToFill" />
									<!-- #endif -->
									<!-- #ifndef APP-PLUS -->
									<image lazy-load :src="oss(find.images[1].url, 120, 120)" mode="scaleToFill" />
									<!-- #endif -->
								</view>
								<view v-if="find.images.length === 3" class="live-goods-item"
									@tap="previewImage(find.images, 2)">
									<!-- #ifdef APP-PLUS -->
									<image :style="{ width: width * 0.333 + 'px'}" lazy-load
										:src="oss(find.images[2].url, 120, 120)" mode="scaleToFill" />
									<!-- #endif -->
									<!-- #ifndef APP-PLUS -->
									<image lazy-load :src="oss(find.images[2].url, 120, 120)" mode="scaleToFill" />
									<!-- #endif -->
								</view>
							</view>
						</view>
						<!-- 基数排序 -->
						<view class="find-list-item-container-item" v-else
							v-for="(img, kes) in find.images" :key="kes" @tap="previewImage(find.images, kes)" :style="{
									width: `${(width - 6) / 3}px`,
									height: `${(width - 6) / 3}px`
								}">
							<!-- #ifdef APP-PLUS -->
							<image :style="{ width: `${(width - 6) / 3}px` }" lazy-load :src="oss(img.url, 120, 120)"
								mode="scaleToFill" />
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<image lazy-load :src="oss(img.url, 120, 120)" mode="scaleToFill" />
							<!-- #endif -->
						</view>
						<!-- 偶数排序 -->
		<!-- 				<view class="find-list-item-container-item" v-else v-for="(img, kes) in find.images" :key="kes"
							@tap="previewImage(find.images, kes)" :style="{
									width: `${(width - 4) / 2}px`,
									height: `${(width - 4) / 2}px`
								}">
							<!-- #ifdef APP-PLUS -->
							<image :style="{ width: `${(width - 4) / 2}px`,height: `${(width - 4) / 2}px` }" lazy-load
								:src="oss(img.url, 180, 180)" mode="scaleToFill" />
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<image lazy-load :src="oss(img.url, 180, 180)" mode="scaleToFill" />
							<!-- #endif -->
						</view> -->
					</view>

					<!-- 底部 -->
					<view class="find-list-item-content margin-tb-bj flex-direction align-center" style="display:flex;justify-content: space-between; align-items: center;">
						<!-- <text class="text-gray-light text-min">{{timeToDate(find.createtime)}} {{find.province}} ·{{find.city}}{{find.area}}</text> -->
						<view class="btnleft" style="display:flex;align-items: center;">
							<image src="/static/images/tel.png" style="width:30rpx;height:30rpx;"></image>
							<text class="text-gray-light text-min" @click="callphone(find.mobile)"><text
										style="font-size:28rpx;color:#aaa">{{find.mobile}}</text></text>
						</view>
						
						<view class="btnright" style="font-size:26rpx;color:#aaa;">
							{{timeToDate(find.createtime)}}
						</view>
						
						
					</view>
				</view>
				
				<view style="width:100%;height:120rpx;background:yellowgreen;text-align: center;line-height: 120rpx;">广告位</view>
	</view>
</template>

<script>
	
export default {
	data(){
		return {
			find:{},
			width:0,
			height:0,
		}
	},
	
	onLoad(options){
		let detail = JSON.parse(options.find);
		this.find = detail;
		this.width = options.width
		this.height = options.height
	},
	methods:{
		//预览图片
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.oss(item.url, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			// 格式化html
			formatHtml(content) {
				return (content.replace(/<\/?.+?>/g, "").replace(/ /g, ""));
			},
			timeToDate(timestamp) {
				if (timestamp == null) timestamp = Number(new Date());
				timestamp = parseInt(timestamp);
				// 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
				if (timestamp.toString().length == 10) timestamp *= 1000;
				var timer = (new Date()).getTime() - timestamp;
				timer = parseInt(timer / 1000);
				// 如果小于5分钟,则返回"刚刚",其他以此类推
				let tips = '';
				switch (true) {
					// case timer < 300:
					// 	tips = '刚刚';
					// 	break;
					// case timer >= 300 && timer < 3600:
					// 	tips = parseInt(timer / 60) + '分钟前';
					// 	break;
					// case timer >= 3600 && timer < 86400:
					// 	tips = parseInt(timer / 3600) + '小时前';
					// 	break;
					// case timer >= 86400 && timer < 2592000:
					// 	tips = parseInt(timer / 86400) + '天前';
					// 	break;
					default:
						var date = new Date(timestamp);
						var year = date.getFullYear();
						var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
						var date = date.getDate() < 10 ? '0' + (date.getDate()) : (date.getDate());
						tips = `${year}-${month}-${date}`
				}
				return tips;
			},
		oss(url, w = 120, h = 120, modenum = 2, type = '', format = 'jpg', resize = 'resize', multiple = 3) {
			let ossStc = this.$store.state.common.appUrl.oss;
			let image = '';
			let mode = ["m_lfit", "m_mfit", "m_fill", "m_fixed"];
			// 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
			let rule = ["?x-oss-process=image", "auto-orient,1", "interlace,1", "format,jpg", "quality,q_90",
				"sharpen,50", "resize,m_fixed,w_120,h_120"
			];
			// 转换格式
			if (format == 'png') {
				rule[3] = ["format", "png"].join(",");
			}
			// 判断是否有高度
			if (w == 0) {
				rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(",");
			} else if (h == 0) {
				rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(",");
			} else {
				rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(",");
			}
			//当地址不存在
			if (url) {
				if ((/^data:image\//.test(url))) {
					image = url;
				} else if ((/^(http|https):\/\/.+/.test(url))) {
					rule.pop();
					image = url + rule.join("/");
				} else {
					image = ossStc + url + rule.join("/");
				}
			} else {
				if (type == 'transparent') {
		
				} else if (type == 'avatar') {
					image = ossStc + '/common/mine_def_touxiang_3x.png';
				} else {
					image = ossStc + '/common/img_default3x.png';
				}
			}
			return image;
		},
		
	}
}
	
</script>

<style scoped>
	@import '@/static/style/wanlnvue.css';

	.shop-avatar {
		background-color: #f5f5f5;
		height: 64rpx;
		width: 64rpx;
	}

	.find-button {
		background-color: #f0f0f0;
		height: 64rpx;
		line-height: 1;
	}

	.find-button-radius {
		background-color: #f0f0f0;
		line-height: 1;
		height: 65rpx;
		width: 65rpx;
	}

	.find-list-item-content {
		/* #ifndef APP-PLUS */
		display: inline;
		/* #endif */
	}

	.find-list-item-new {
		border-top: 1px solid #eee;
	}

	.find-list-item-container-item {
		margin: 2rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
		overflow: hidden;
		background-color: #f9f9f9;
	}

	.live-cover {
		background-color: #f9f9f9;
		height: 404rpx;
	}

	.live-cover-bg {
		z-index: 1;
	}

	.live-cover-main {
		z-index: 2;
	}

	.live-cover-paly {
		height: 120rpx;
		width: 120rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.5);
	}

	.live-cover-people {
		bottom: 25rpx;
		left: 25rpx;
	}

	.live-cover-fabulous {
		bottom: 25rpx;
		right: 25rpx;
	}

	.live-cover-tag {
		height: 50rpx;
		width: 50rpx;
	}

	.live-goods-item {
		background-color: #f9f9f9;
		height: 200rpx;
		overflow: hidden;
	}


	.find-list-item-goods {
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		height: 100rpx;
	}

	.find-list-item-goods-item {
		/* #ifndef APP-PLUS */
		display: inline-flex;
		/* #endif */
		height: 100rpx;
		margin-right: 12rpx;
		border-radius: 18rpx;
		background-color: #f9f9f9;
		width: 100%;
	}

	.find-list-item-goods-item-img {
		height: 100rpx;
		width: 100rpx;
		border-top-left-radius: 18rpx;
		border-bottom-left-radius: 18rpx;
	}

	.find-list-item-goods-item-content-title-text {
		lines: 1;
		overflow: hidden;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		text-overflow: ellipsis;
	}

	.find-list-item-goods-item-icon {
		width: 60rpx;
	}
	
	image{
		    width: 100%;
		    height: 100%;
		}
		
	.tag{
		position:absolute;
		top:10rpx;
		right:10rpx;
	}	
</style>